layui.use(['form','layer','element','slider','tinymce','upload','laytpl','dragsort','colorpicker','rate','tagsinput','select','cascader','iconHhysFa','jquery','rncontrol','drawer','engine_from'], function() {
var layer = layui.layer
  , element = layui.element
  , tinymce = layui.tinymce
  , tagsinput = layui.tagsinput
  , upload = layui.upload
  , colorpicker = layui.colorpicker
  , form = layui.form
  , rate = layui.rate
  , laytpl = layui.laytpl
  , code = layui.code
  , cascader = layui.cascader
  , iconHhysFa = layui.iconHhysFa
  , engine_from=layui.engine_from
  , dragsort = layui.dragsort;
 
SubControl();
var mainContainer = document.getElementById("mainContainer");
new Sortable(mainContainer, {
group: {
name: 'rnshared',
pull: true
},
handle: '.widget-view-drag',
animation: 150,
onAdd: function(evt) {
addCtrl(evt);
}
});
loadSortable = function(element) {
new Sortable(element, {
group: {
  name: 'rnshared',
  pull: true
},
handle: '.widget-view-drag',
animation: 150,
onAdd: function(evt) {
  addCtrl(evt);
}
});
}
provider.loadSortable = loadSortable;
var addCtrl = function(evt) {

var item = evt.item;
var mode = item.getAttribute("mode");
if (mode) 
{
var newElem = engine_from.factory.instance(item.getAttribute("mode"));
item.parentNode.replaceChild(newElem, item);
var containers = newElem.getElementsByClassName("ays-ctrl-container");
for (i=0;i<containers.length;i++) {
  loadSortable(containers[i]);
}
form.render();
}
RnControl();
}
});



<!--S渲染设计区域-->	
	function DrawerView(res)
	{
		if (res.data==null){return false;}
		$(".rn_text").val(res.data.design_text);
		$(".rn_text_json").val(res.data.design_json);
		$(".rn_kongjianjs").val(res.data.rn_kongjianjs);
		$(".rn_text_add").val(res.data.rn_text_add);
		$(".rn_formWidth").val(res.data.rn_formWidth);
		$(".rn_formHeight").val(res.data.rn_formHeight);
		var rn_add_type=res.data.rn_add_type || '1';
		var rn_edit_type=res.data.rn_edit_type || '1';
		var rn_view_type=res.data.rn_view_type || '1';
		var rn_del_type=res.data.rn_del_type || '1';
		$(":radio[name='RnData[rn_add_type]'][value='"+rn_add_type+"']").prop("checked", "checked");
		$(":radio[name='RnData[rn_edit_type]'][value='"+rn_edit_type+"']").prop("checked", "checked");
		$(":radio[name='RnData[rn_view_type]'][value='"+rn_view_type+"']").prop("checked", "checked");
		$(":radio[name='RnData[rn_del_type]'][value='"+rn_del_type+"']").prop("checked", "checked");
		layui.form.render('radio');
		if (res.data.design_text)
		{
		$("#mainContainer").html(jm.base64decode(res.data.design_text));
		$('.rn_text').val(res.data.design_text);
		RnControl();
		layui.form.render();
		$(".rn_fieldstype").attr("readonly",true);
		$(".rn_fieldstype").attr("disabled",true);
		$('.rn_jiedian').each(function(kk) 
		{
		var containers = $(this).find(".ays-ctrl-container");
		if (containers.length!=0)
		{
		for (i=0;i<containers.length;i++) {
		loadSortable(containers[i]);
		}
		}
		if (kk==0)
		{
		layui.engine_from.activeControl(this,kk);
		}
		layui.engine_from.activeClickBind(this,kk);
		})
		}
	
	}
<!--E渲染设计区域-->



<!--S加载控件-->
	function SubControl(url)
	{

		
		layui.rncontrol.RnAjax(SubControlUrl+'?num='+num, 'post', 'json', data=[],function (res) {
		var rows=res.data.rows;
		$(".wrap_control").html(WrapControl(rows));
		for(var i=0;i<rows.length;i++){
		WrapSortable(rows[i].rn_num);	
		}
		})
	}
<!--S加载控件-->

<!--S渲染控件-->
	function WrapControl(data)
	{
		var str="";
		for(var i=0;i<data.length;i++){
		str+='<div class="component">';
		str+='<div class="layui-card-header">'+data[i]['rn_name']+'</div>';
		str+='<div class="component-group" id="'+data[i]['rn_num']+'" style="margin-top:10px">';
		if(data[i]['child']){
		var list=data[i]['child'];
		for(var ii=0;ii<list.length;ii++){
		design_json[list[ii]['rn_num']]={};
		design_json[list[ii]['rn_num']]['setting']=list[ii]['rn_json'];
		var rn_icos=list[ii]['rn_icos'];
		if (rn_icos==""){rn_icos="icon-keyboard-9";}
		str+='<ol mode="'+list[ii]['rn_num']+'" class="ays-ctrl-menu" style="border:0px"><div class="icon"><i class="ruinuo-icon '+rn_icos+'"></i></div><div class="name">'+list[ii]['rn_name']+'</div></ol>';
		}
		}
		str+='</div>';
		str+='</div>';
		}
		return str;
	}
<!--S渲染控件-->

	
<!--S控件拖拽-->		
	function WrapSortable(rn_num)
	{
		new Sortable(document.getElementById(""+rn_num+""), {
		group: {
		name: 'rnshared',
		pull: 'clone',
		put: false
		},
		sort: false,
		draggable: ".ays-ctrl-menu",
		setData: function(evt) {
		if (num_id=="0")
		{
		layui.layer.msg('请选择类别', {icon: 2});	
		$(".drawer-right").click();
		return false;		
		}	
		},
		// 结束拖拽
		onEnd: function(evt) {
		evt.item.style.width = "138px";
		},
		// 拖拽移动的时候
		onMove: function(evt,originalEvent) {
		evt.dragged.style.width = "100%";
		}
		});
	}
<!--E控件拖拽-->
<!--S保存数据-->	
	function SaveOk()
	{
		if (num_id==0 || num_id=="")
		{
		layui.layer.msg('请选择模块', {icon: 2});	
		$(".drawer-right").click();
		return false;
		}	
		
		var result = 1;
		var mainContainer = $('#mainContainer');
		mainContainer.find('.rn_jiedian').each(function() 
		{
		var kname=$(this).find(".rn_fieldstype").attr("name");
		if(typeof(kname)=="undefined"){kname="";}
		if (kname.indexOf("rn_demo_")>=0)
		{
		result="请完善字段信息";  
		layui.engine_from.activeControl(this);
		layui.layer.msg(result, {icon: 2});
		return false;	
		}
		})
		if (result==1)
		{
		//提交表单
		buidHtml();
		layui.rncontrol.RnAjax(SaveDesignUrl+'?num='+num+'&num_id='+num_id, 'post', 'json',$('.formData').serialize(),function (res) {
		layer.open({type: 2,title: "预览",content: res.data.url,area: ['90%', '90%']});
		})
		} 
	}
<!--E保存数据-->

<!--S获取设计json-->	
	function buidHtml()
	{
		layui.form.render();
		var mainContainer = $('#mainContainer').clone();//复制元素
		mainContainer.find('.ays-ctrl').removeClass('ays-ctrl');
		var newk=-1;
		var newjson=[];
		mainContainer.find('.rn_jiedian').each(function(k) 
		{
		var s_this=this;
		if ($(this).parents('.ays-ctrl-container').length==0)
		{
		newk=newk+1;
		newjson[newk]={};
		var rndatajson=JSON.parse(jm.base64decode($(this).attr("rndatajson")));
		rndatajson.mode=$(this).attr("mode");
		rndatajson.id=$(this).find(".rn_fieldstype").attr("id");
		if (rndatajson.mode=="label" || rndatajson.mode=="fold")
		{
		if (rndatajson.mode=="label"){var Rndata=rndatajson.label_data;}
		if (rndatajson.mode=="fold"){var Rndata=rndatajson.fold_data;}
		$.each(Rndata, function(i,item) 
		{
		var children=[];
		$(s_this).find(".ays-ctrl-container:eq("+i+")").find(".rn_jiedian").each(function(kk) 
		{
		children[kk]={};
		children[kk]=JSON.parse(jm.base64decode($(this).attr("rndatajson")));
		children[kk].mode=$(this).attr("mode");
		children[kk].id=$(this).find(".rn_fieldstype").attr("id");
		})
		
		if (rndatajson.mode=="label"){rndatajson.label_data[i].children=children;}
		if (rndatajson.mode=="fold"){rndatajson.fold_data[i].children=children;}
		
		})
		}
		if (rndatajson.mode=="card")
		{
		var children=[];
		$(this).find(".ays-ctrl-container").find(".rn_jiedian").each(function(kk) 
		{
		children[kk]={};
		children[kk]=JSON.parse(jm.base64decode($(this).attr("rndatajson")));
		children[kk].mode=$(this).attr("mode");	
		children[kk].id=$(this).find(".rn_fieldstype").attr("id");
		})
		rndatajson.card_data=[];
		rndatajson.card_data[0]={};
		rndatajson.card_data[0].children=children;
		}
		newjson[newk]=rndatajson;
		}
		
		})
		//去除元素
		mainContainer.find('.widget-view-drag').remove();
		mainContainer.find('.widget-view-action').remove();
		mainContainer.find('.layui-iconPicker').remove();
		mainContainer.find('.tagsinput').remove();
		mainContainer.find('.fieldstype_tags').removeAttr("data-tagsinput-init");
		mainContainer.find('.fieldstype_tags').css("display","");
		mainContainer.find('.el-cascader').remove();
		mainContainer.find('.fieldstype_cascader').css("display","");
		mainContainer.find('.layui-form-switch').remove();
		mainContainer.find('.layui-form-radioed').remove();
		mainContainer.find('.layui-form-checkbox').remove();
		mainContainer.find('.layui-form-select').remove();
		mainContainer.find('.layui-upload-file').remove();
		mainContainer.find('.rn_file_list').remove();
		mainContainer.find('.layui-upload-file').remove();
		mainContainer.find('.layui-rate').remove();
		mainContainer.find('.layui-slider').remove();
		mainContainer.find('.layui-slider-wrap').remove();
		mainContainer.find('.fieldstype_slider').css("position","");
		mainContainer.find('.tox-tinymce').remove();
		mainContainer.find('.fieldstype_htmlediter').css("display","");
		mainContainer.find('.fieldstype_htmlediter').removeAttr("aria-hidden");
		mainContainer.find('.layui-iconPicker').remove();
		mainContainer.find('.fieldstype_ico_select').css("display","");
		mainContainer.find('.widget-view-ctrl-action').removeClass('widget-view-ctrl-action');
		mainContainer.find('.rn_jiedian').addClass('ays-ctrl');
		mainContainer.find('.tpl_xinxilist').html("");
		mainContainer.find('.tpl_datalist').html("");
		mainContainer.find('.tpl_timeaxis').html("");
		mainContainer.find('.tpl_menubutton').html("");
		mainContainer.find('.rn_echart').html("");
		mainContainer.find('.schedule_time').html("");
		mainContainer.find('.schedule_data').html("");
		mainContainer=mainContainer.html();
		var formDiv = $('<div></div>');
		formDiv.append(mainContainer);

		$('.rn_text').val(jm.base64encode(formDiv.html()));//设计页面html
		$('.rn_text_json').val(jm.base64encode(JSON.stringify(newjson)));//表单json
	}
<!--E获取设计json-->	

